{% extends 'base.html' %}
{% load staticfiles %}
{% block custom_css%}
<style>
    #right {
        margin-top: 30px;
    }
    .bta,
    .bta:hover {
        color: #337ab7;
    }
</style>
{% endblock%}

{% block content %}

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div>
        <h2 class="sub-header pull-left">房间信息</h2>
        <div class="btn-group pull-right" id="right">
                <button type="button" class="btn btn-primary dropdown-toggle" 
                        data-toggle="dropdown">
                    过滤 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/vacancy?room_type=1">标准间</a></li>
                    <li><a href="/vacancy?room_type=2">大床房</a></li>
                    <li><a href="/vacancy?room_type=3">商务双人间</a></li>
                    <li><a href="/vacancy?room_type=4">豪华大床房</a></li>
                </ul>
            </div>
    </div>
    <div class="clearfix"></div>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>房间号</th>
                    <th>楼层</th>
                    <th>房间类型</th>
                    <th>房间状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for room_info in rooms%}
                <tr>
                    <td>{{forloop.counter}}</td>
                    <td>{{room_info.num}}</td>
                    <td>{{room_info.floor}}</td>
                    <td>
                        {% if room_info.type == 1 %}
                        标准间
                        {%elif room_info.type == 2 %}
                        大床房
                        {%elif room_info.type == 3 %}
                        商务双人间
                        {%elif room_info.type == 4 %}
                        豪华大床房
                        {%endif%}

                    </td>
                    <td>
                        {% if room_info.status == 1 %}
                        空闲
                        {%elif room_info.status == 2 %}
                        预定
                        {%elif room_info.status == 3 %}
                        清理中
                        {%elif room_info.status == 4 %}
                        维修中
                        {%elif room_info.status == 5 %}
                        入住
                        {%endif%}
                    </td>
                    <td><a type="button" class="btn btn-default bta" href="/enter?room={{room_info.num}}">入住</a></td>
                </tr>
                {%endfor %}

            </tbody>
        </table>
    </div>
</div>


{% endblock %}